<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>乐鲜生活后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/_all-skins.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/admin-lte/2.4.3/js/adminlte.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
  <script src="../resource/ply/Ply.min.js"></script>
  <link rel="stylesheet" href="../css/goodClass.css">
  <link rel="stylesheet" href="../resource/ply/ply.css">
</head>

<body class="skin-purple">
  <!-- Main Header -->
  <header id="app-header">
    <component-header></component-header>
  </header>

  <script src="../js/header.js"></script>

  <aside id="app-sidebar">
    <component-sidebar></component-sidebar>
  </aside>

  <script src="../js/sidebar.js"></script>

  <div id="app-good-classification">
    <component-content title="分类管理">
      <component-box class="box-solid box-primary" title="分类管理">
        <div class="row">
          <div class="col-md-4" v-for="(category, index) in categories">
            <div class="small-box bg-aqua">
              <div class="inner">
                <h5>{{ category.category1_Name }}</h5>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
            </div>
            <div style="margin-top: -8px; margin-left: 10px" class="editable block__list block__list_words">
              <ul :ref="getBlock(index)">
                <li v-for="two in category.category2">
                  {{ two.name }}
                  <!-- <i class="js-remove">✖</i> -->
                </li>
              </ul>
              <button :id="getEditable(index)" @click="addItem(getEditable(index), category)" class="btn btn-block">添加</button>
            </div>
          </div>

        </div>
        <button class="btn btn-primary pull-right" @click="submitCategories">提交</button>
        <button class="btn btn-warning pull-right" @click="resetCategories" style="margin-right: 16px">重置</button>
      </component-box>
      <script src="../js/box.js"></script>
    </component-content>
    <script src="../js/content.js"></script>
  </div>

  <script src="../js/goodClassification.js"></script>

</body>

</html>